<!DOCTYPE html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title></title>
</head>

<div id="app">
  <div id="content">
    <!-- 可变内容 -->
    <router-view></router-view>
  </div>
  <div id="footer">
    <!-- 底部按钮 -->
    <router-link class="item" to="/home">首页</router-link>
    <router-link class="item" to="/news">用户</router-link>
    <router-link class="item" to="/shop">商城</router-link>
    <router-link class="item" to="/user">我的</router-link>
  </div>
</div>

<style>
#app{
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

#content{
  flex: 1;
}
#footer{
  height: 50px;
  display: flex;
  border-top: 1px solid #ccc;
}
#footer .item{
  flex: 1;
  text-align: center;
  line-height: 50px;
}
</style>

<script>
var home = { template: '<div>首页</div>' }
 
// 路由规则
var routes = [
  { path: '/', component: home },
  { path: '/home', component: home },
  { path: '/news', component: { template: '<div>用户列表</div>' } },
  { path: '/shop', component: { template: '<div>商城</div>' } },
  { path: '/user', component: { template: '<div>我的</div>' } },
  { path: '/user*', component: { template: '<div>我的1123</div>' } },
  { path: '/*', component: { template: '<div>404</div>' } },
]
  
var router = new VueRouter({
  routes: routes
})
  
var app = new Vue({
  el: '#app',
  router,
})
</script>

